/* pages/Coupon/Coupon.wxss */

page {
    background: #fff;
    box-sizing: border-box;
    width: 100%;
}

.couponBg {
    width: 690rpx;
    height: 180rpx;
    position: relative;
    margin: 20rpx 30rpx 0;
}

.couponBg:nth-last-child(1) {
    margin-bottom: 30rpx;
}

.couponBg image {
    width: 100%;
    height: 100%;
}

.couponPrice {
    font-size: 46rpx;
}

.couponBox {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.title {
    height: 44rpx;
    line-height: 44rpx;
    font-size: 32rpx;
    color: #fff;
}

.cooupon-mj {
    width: 100%;
    line-height: 50rpx;
    height: 50rpx;
    font-size: 24rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
}

.Receive {
    background: #fff;
    color: #ff5c6d;
    font-size: 20rpx;
    box-sizing: border-box;
    border-radius: 42rpx;
    position: absolute;
    top: 74rpx;
    right: 30rpx;
    width: 120rpx;
    height: 40rpx;
    line-height: 40rpx;
    text-align: center;
    font-weight: bold;
}

.stage {
    height: 36rpx;
    line-height: 36rpx;
    font-size: 22rpx;
    color: #fff;
}

.on {
    background: #f6f6f6;
    color: #999;
}

.nocoupon {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-shrink: 0;
    color: #999;
    font-size: 28rpx;
    padding: 34rpx 0;
}

.nav {
    padding: 30rpx 0;
    flex: 1;
    box-sizing: border-box;
    transition: 0.2s;
    color: #999;
    position: relative;
}

.active {
    color: #333;
}

.active::after {
    content: "";
    width: 40rpx;
    height: 4rpx;
    background-color: #ff5c6d;
    position: absolute;
    bottom: 18rpx;
    left: calc(50% - 20rpx);
}

.couponBgbox {
    box-sizing: border-box;
    padding: 0 30rpx;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.mcoupon {
    background: #eee;
    box-sizing: border-box;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}

.left {
    display: flex;
    color: #fff;
    align-items: flex-end;
    width: 206rpx;
    justify-content: center;
}

.left>text:nth-child(1) {
    font-size: 26rpx;
    line-height: 30rpx;
}

.left>text:nth-child(2) {
    font-size: 50rpx;
    line-height: 50rpx;
}

.right {
    padding: 30rpx;
    flex: 1;
    box-sizing: border-box;
}
